<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>岭南醒狮之旅</title>
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
			
			.container {
				max-width: 98%;
				position: relative;
				margin: 0 auto;
				text-align: center;
				height: 100vh;
				/*将容器高度设置为浏览器视窗高度的100%*/
				overflow: hidden;
			}
			
			.bg {
				position: relative;
				margin: auto;
				width: fit-content;
				overflow: hidden;
			}
			
			.bgimg {
				max-width: 100%;
				/*最大宽度为100%*/
				max-height: 100%;
				/*最大高度为100%*/
				height: 100vh;
			}
			.shizi {
				position: absolute;
    			width: 39%;
    			left: 10%;
    			bottom: 18%;
    			z-index: 2;
			}
			
			.yinfu {
				position: absolute;
				width: 30%;
				left: 58%;
				bottom: 58%;
				z-index: 2;
			}
		</style>
		<script type="text/javascript">
		window.addEventListener('DOMContentLoaded', function() {
            var image = document.querySelector('.shizi');
  
            image.addEventListener('mouseenter', function() {
                image.style.transform = 'scale(1.2)';
            });
    
            image.addEventListener('mouseleave', function() {
                image.style.transform = 'scale(1)';
            });
        });
        window.addEventListener('DOMContentLoaded', function() {
            var image = document.querySelector('.yinfu');
  
            image.addEventListener('mouseenter', function() {
                image.style.transform = 'scale(1.2)';
            });
    
            image.addEventListener('mouseleave', function() {
                image.style.transform = 'scale(1)';
            });
        });
	</script>
	</head>

	<body>
		<div class="container">
			<div class="bg">
				<img class="bgimg" src="res/huang.png" />
				<img class="shizi" src="res/shizi.png" />
		        <img class="yinfu" src="res/yinfu.png" /> 
			</div>
		</div>
	</body>

</html>